<!-- eslint-disable vue/multi-word-component-names -->
// eslint-disable-next-line vue/multi-word-component-names
<template>
	<form @submit.prevent="handleSubmit">
		<div class="nickName">
			<input maxlength="10" type="text" placeholder="用户昵称" v-model="dataForm.nickname" />
			<span class="tip">{{ dataForm.nickname.length }}</span>
		</div>
		<span class="error">{{ errorInfo.nickname }}</span>
		<div class="content">
			<textarea maxlength="300" placeholder="shuru" v-model="dataForm.content"></textarea>
			<span class="tip">{{ dataForm.content.length }}</span>
		</div>
		<span class="error">{{ errorInfo.content }}</span>
		<div class="btn">
			<button>{{ isSubmit ? "tijai" : "提交" }}</button>
		</div>
	</form>
</template>
<script>
export default {
	data() {
		return {
			dataForm: {
				nickname: "",
				content: "",
			},
			errorInfo: {
				nickname: "",
				content: "",
			},
			isSubmit: false,
		};
	},
	methods: {
		handleSubmit() {
			this.errorInfo.nickname = this.dataForm.nickname ? "" : "请输入昵称";
			this.errorInfo.content = this.dataForm.content ? "" : "请输入内容";
			if (this.errorInfo.nickname || this.errorInfo.content) {
				return;
			}
			console.log("提交了");
			this.isSubmit = true;
			this.emit("submit", this.dataForm, () => {
				this.dataForm.nickname = "";
				this.dataForm.content = "";
				this.isSubmit = false;
			});
		},
	},
};
</script>
